/**
 * 字段设置
 * */
import React from 'react';
import { Row, Button, Collapse, Spin, Empty } from 'antd';
import { router, withRouter } from 'umi';
import { useRequest, defaultFormatResult } from '@/hooks';
import authHelper from '@/utils/auth/helper';
import { FieldTable } from './containers';
import { getFieldSetList } from './service';
import styles from './index.less';

const { checkCode } = authHelper;
const { Panel } = Collapse;

const Field = () => {
    const { data: fieldData, loading, run: fetchFieldData } = useRequest(getFieldSetList, {
        manual: true,
        initialData: [],
        ...defaultFormatResult
    });

    React.useEffect(() => {
        fetchFieldData();
    }, []);

    const headerStyle = { fontSize: 16, color: '#000', fontWeight: 500 };

    return (
        <>
            <Row type="flex" justify="space-between" align="middle" style={{ marginBottom: 16 }}>
                <div>
                    {/* <div style={headerStyle}>字段设置</div> */}
                    <div style={{ fontSize: 12, color: 'rgba(0, 0, 0, 0.65)' }}>
                        * 字段设置是对无法自动抓取的数据字段进行手动设置
                    </div>
                </div>
                {checkCode('office:recruitment:setting:field:record') && (
                    <Button
                        type="primary"
                        onClick={() => {
                            history.push({
                                pathname: '/office/personnelManagement/recruitment/field/record'
                            });
                        }}
                    >
                        设置记录
                    </Button>
                )}
            </Row>
            <Spin spinning={loading}>
                <div style={{ minHeight: 200 }}>
                    {fieldData?.map(channel => (
                        <Collapse
                            key={channel.channelCode}
                            bordered={false}
                            className={styles.fieldCustom}
                            defaultActiveKey={['1']}
                            expandIconPosition="right"
                        >
                            <Panel header={<span style={headerStyle}>{channel.channelName}</span>} key="1">
                                <FieldTable
                                    dataSource={channel.channelPositionList || []}
                                    type={channel.channelCode}
                                    onRefresh={fetchFieldData}
                                />
                            </Panel>
                        </Collapse>
                    ))}
                    {(fieldData === undefined || (!loading && fieldData?.length === 0)) && (
                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ marginTop: 64 }} />
                    )}
                </div>
            </Spin>
        </>
    );
};

export default withRouter(Field);
